<template>
  <div>
    <div class="outside" :style="{'--zhandianwide':zhandianwide+'px'}">
      <h3>站点线路图</h3>
      <div class="inside">
        <div class="xinxi">
          <div class="head1"
               style="text-align: center;font-size: 14px;font-weight: bold;border-right: 1px rgb(147, 205, 187) solid;width: 45px;height: 43px;background-color: rgb(155, 231, 208);margin: 0;float: left">
            开往<br>→
          </div>
          <div class="head2"
               style="text-align: center;width: auto;line-height: 42px;font-size: 16px;font-weight: bold;margin: 0;background-color: rgb(155, 231, 208);height: 43px;">
            {{ this.routeInfo.routeName }}白云——滘心
          </div>
          <div class="body1" style="background-color: rgb(31, 155, 163); height: 100%">
            <div
                style="margin-left: 3px;line-height: 60px;font-size: 28px;font-weight: bold;color: rgb(247, 251, 249);">
              {{ this.routeInfo.routeNum }}路
            </div>
            <div
                style="margin-left: 3px;line-height: 15px;letter-spacing:2px;font-size: 15px;font-weight: bold;color: rgb(247, 251, 249);">
              首班 {{ this.routeInfo.beginTime }} 末班 {{ this.routeInfo.endTime }}
            </div>
            <div
                style="margin-left: 3px;line-height: 35px;letter-spacing:1px;font-size: 15px;font-weight: bold;color: rgb(247, 251, 249);">
              间隔： 不大于30分钟一班
            </div>
            <div
                style="margin-left: 3px;line-height: 15px;letter-spacing:1px;font-size: 15px;font-weight: bold;color: rgb(247, 251, 249);">
              票价： 2元
            </div>

          </div>
        </div>
        <div class="zhandian">
          <el-table
              stripe
              class="t"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              :data="AllData"
              border
              style="width: 100%;border-top: 4px rgb(54, 166, 173) solid">
            <el-table-column
                align="center"
                width="44px"
                v-for="(item,index) in allList"
                :prop="item.key"
                :key="index"
                :label="item.siteOrder">
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      routeInfo: {
        routeNum:0,
        routeName: '',
        beginTime: '',
        endTime: '',
      },
      zhandianwide: 0,
      AllData: [],
      allList: [],
      getData: [],
    }
  }, created() {

    this.setData()
  },
  methods: {


    setData() {
      //这里请求后台的统计信息，合计可以在我这里进行运算
      this.$http({
        url: '/sites/getSiteById',
        method: 'GET',
        params:{
          id: this.routeInfo.routeNum
        }
      }).then(result => {
        console.log(result);
        if (result.status == 200) {

          /*表格动态宽度*/
          this.zhandianwide = 210 + 44 * result.data.length + 13

          for (let i = 0; i < result.data.length; i++) {
            this.getData.push(result.data[i]);
          }
          console.log(this.getData);
          var a = {};
          var b = [];
          // a['title'] = this.getData[i].title;
          var x = 0;
          var join = 0;
          for (var i in this.getData) {
            x += 1;
            b.push({siteOrder: "" + this.getData[i].siteOrder, key: 'siteName' + x});
            a['siteName' + x] = this.getData[i].siteName;

          }
          this.AllData.push(a);
          this.allList = b;
          console.log(this.allList);
        } else {
          this.$message({
            showClose: true,
            message: '发生了未知错误',
            type: 'error'
          })
        }
      });
    },

  }

}
</script>

<style scoped>
h3 {
  text-align: center;
  margin: 10px;
  color: rgb(27, 155, 163);
  font-size: 24px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  letter-spacing: 2.5px;
}

.outside {
  margin: 10px auto;
  width: var(--zhandianwide);
  position: center;
}

.inside {
  height: 157px;
}

.t {
  border: rgb(195, 227, 232) 1px solid;
  width: 20px;

}

.xinxi {
  float: left;
  width: 210px;
  height: 100%;

}

.zhandian {


  display: flex;
  margin: 10px;
}


</style>